<template>
  <el-dialog
    :modelValue="modelValue"
    title="任务详情"
    width="900"
    align-center
    @close="handleClose(true)"
    draggable
    destroy-on-close
  >
    <div v-loading="loading">
      <div class="flex justify-between items-center">
        <div class="font-bold text-[16px]">{{ list.title }}</div>
        <div>
          <el-button @click="handleEdit(list)" :disabled="list.status == 2"
            >编辑</el-button
          >
          <el-button type="primary" @click="handleFinish(list)">{{
            list.status == 2 ? "设置未完成" : "设置完成"
          }}</el-button>
        </div>
      </div>
      <div class="bg-[#f6faff] py-[8px] my-[8px] rounded-[8px]">
        <el-row :gutter="20">
          <el-col :span="14">
            <span class="inline-block w-[60px] text-right text-[#999999]"
              >状态:</span
            >
            <span
              class="ml-[16px] text-[#333333]"
              :class="{ 'text-[#e4040d]': list.status == 1 }"
              >{{ list.status_desc }}</span
            >
          </el-col>
          <el-col :span="10">
            <span class="inline-block w-[60px] text-right text-[#999999]"
              >截止时间:</span
            >
            <span class="ml-[16px] text-[#333333]">{{
              list.deadline_time
            }}</span>
          </el-col>
        </el-row>
        <div class="my-[8px]">
          <span class="inline-block w-[60px] text-right text-[#999999]"
            >处理人:</span
          >
          <span class="ml-[16px] text-[#333333]">{{
            list.processed_user_text
          }}</span>
        </div>
        <el-row :gutter="20">
          <el-col :span="14">
            <span class="inline-block w-[60px] text-right text-[#999999]"
              >创建人:</span
            >
            <span class="ml-[16px] text-[#333333]">{{
              list.create_user_text
            }}</span>
          </el-col>
          <el-col :span="10">
            <span class="inline-block w-[60px] text-right text-[#999999]"
              >创建时间:</span
            >
            <span class="ml-[16px] text-[#333333]">{{ list.create_time }}</span>
          </el-col>
        </el-row>
      </div>
      <div style="height: 510px">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="任务描述" name="1">
            <div class="mt-[8px] html-title overflow-auto" v-html="list.content"></div>
          </el-tab-pane>
          <el-tab-pane label="日志" name="2">
            <vxe-grid v-bind="tableOptions" ref="tableRef" class="mt-[8px]">
              <template #op_content="{ row }">
                <div v-html="row.op_content"></div>
              </template>
            </vxe-grid>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
    <template #footer>
      <el-button @click="handleClose(true)">关闭</el-button>
    </template>
  </el-dialog>
  <Add
    v-model="addVisible"
    :data="addData"
    :id="addIds"
    @close="(addData = null), (addIds = null)"
    @refresh="
      getDetail;
      activeName = '1';
    "
  />
</template>
<script setup>
import { ElMessage } from "element-plus";
import {
  getTaskDetail,
  getTaskLog,
  editTaskStatus,
} from "@/api/system/user.js";
import { getTodayDate } from "@/utils/time.js";
import Add from "../add/index.vue";
// 声明接收参数
const props = defineProps({
  modelValue: { type: Boolean, default: false },
  id: { type: [String, Number], default: null },
});
const activeName = ref("1");
const list = ref({});
const tableRef = ref();
watch(
  () => props.id,
  async (val) => {
    if (val) {
      getDetail();
    }
  }
);

const getDetail = async () => {
  try {
    loading.value = true;
    const { data } = await getTaskDetail({ id: props.id });
    list.value = data || {};
  } catch (error) {
  } finally {
    loading.value = false;
  }
};
const emit = defineEmits(["update:modelValue", "close", "refresh"]);
const loading = ref(false);
const tableOptions = reactive({
  height: 460,
  border: "inner",
  pagerConfig: { pageSize: 20 },
  showOverflow: true,
  rowConfig: { height: 52 },
  columns: [
    {
      field: "create_user_text",
      title: "操作人",
      width: 170,
    },
    { field: "create_time", title: "操作时间", width: 170 },
    { field: "op_title", title: "操作类型", width: 100 },
    {
      field: "op_title",
      title: "处理事项",
      minWidth: 320,
      slots: {
        default: "op_content",
      },
    },
  ],
  proxyConfig: {
    autoLoad: false,
    props: {
      result: "data",
      total: "total",
    },
    ajax: {
      query: ({ page }) => {
        page = {
          ...page,
          pageNum: page.currentPage,
          currentPage:undefined
        }
        return getTaskLog({
          ...page,
          task_id: props.id,
        });
      },
    },
  },
});
const addVisible = ref(false);
const addData = ref({});
const addIds = ref(null);
const handleEdit = (val) => {
  addVisible.value = true;
  addData.value = val;
  addIds.value = val.id;
};
const handleClick = (val) => {
  if (val.props.name === "2") {
    tableRef?.value?.commitProxy("query");
  }
};
const handleFinish = async (val) => {
  let time = getTodayDate();
  const { code, message } = await editTaskStatus({
    id: val.id,
    status: val.status == 2 ? (time < val.deadline_time ? 0 : 1) : 2,
  });
  if (code !== 200) {
    ElMessage.error(message);
    return;
  }
  ElMessage.success("设置成功");
  getDetail();
};
const handleClose = async (refresh) => {
  list.value = {};
  activeName.value = "1";
  emit("update:modelValue", false);
  emit("close");
  if (refresh) emit("refresh");
};
</script>
<style lang="scss" scoped>
:deep(.el-tabs__nav-scroll) {
  padding: 0 !important;
}
:deep(.vxe-cell) {
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow-wrap: break-word; /* 兼容性较好的属性 */
  word-break: break-all; /* 新的标准属性 */
}
.html-title {
  :deep(h1) {
    font-size: 2em;
    font-weight: 700;
  }
  :deep(h2) {
    font-size: 1.5em;
    font-weight: 700;
  }
  :deep(h3) {
    font-size: 1.17em;
    font-weight: 700;
  }
  :deep(h4) {
    font-size: 1em;
    font-weight: 700;
  }
  :deep(h5) {
    font-size: 0.83em;
    font-weight: 700;
  }
}
</style>
